<script setup>

import ItemCase from "@/components/ItemCase.vue";

defineProps({
  data: {type: Object, required: true},
})
</script>

<template>
  <view class="row container">
    <view class="intro-card fadeIn d2s">
      <view class="font150 inter" style="color: #ffffff29;">{{ data.number }}</view>
      <view class="column intro">
        <view class="font56">{{ data.title }}</view>
        <view class="font28" style="color: #ffffff80;">{{ data.eng }}</view>
        <view class="row line">
          <view class="progress"/>
        </view>
        <view class="sub-title font24 top4">{{ data.desc }}</view>
      </view>
      <ItemCase icon="icon" :service="data.number" :titles="data.titles" width="25.5%" fw="80%" iw="28%"/>
    </view>
    <view class="detail font24">
      <span>{{ data.detail }}</span>
    </view>
  </view>
</template>

<style scoped>
.container {
  align-items: flex-end;
}

.intro-card {
  z-index: 1;
  width: 50%;
  height: calc(100vw * (840 / 1920));
  bottom: 0;
  padding: 3%;
  background: linear-gradient(215deg, #383D3E 0%, #191919 100%);

  .intro {
    margin-left: 6%;
    margin-top: -12%;

    .line {
      width: 30%;
      height: 2px;
      background-color: white;
      margin-top: 4%;

      .progress {
        width: 40%;
        height: 4px;
        background-color: #04c0df;
      }
    }
  }
}

.detail {
  width: 50%;
  color: #979797;
  padding: 4% 0 6% 4%;
}
</style>